<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#idWorkContent {
				display: flex;
				align-items: center;
			}

			#idAddWork {
				display: flex;
				justify-content: flex-end;
			}
		</style>
	</head>
	<body>
		<h1>工作简历</h1>
		<hr>
		<div id="workAll">
			
		</div>
		<div id="idAddWork">
			<a href="#" id="a_add" >添加工作经历</a>
		</div>
	</body>
	<script>
		document.getElementById("a_add").onclick=function(){
			var new_div=document.createElement("div");
			new_div.innerHTML=`
				公司名称：
				<input type="" name="" id="" value="" />
				职位：
				<input type="" name="" id="" value="" />
				<a href="#" onclick="remove_element(event);">
					删除工作经历
				</a>
				<br/>
				<br/>
				<div id="idWorkContent">
					工作职责及工作内容描述:<textarea rows="8" cols="100"></textarea>
				</div>
				<hr>`
			document.getElementById("workAll").appendChild(new_div);
		}
		function remove_element(event){
			/* document.getElementById("workAll").removeChild(event.target.parentElement); */
			
			//a标签点击 后传递事件对象，由事件对象得到target节点，再由target节点获取父标签
			var remove_div=event.target.parentElement
			//得到remove_div 的父标签workAll，使用父标签调用 removeChild方法 删除remove_div 
			document.getElementById("workAll").removeChild(remove_div);
		}
	</script>
</html>
